<template>
    <div class="app">
        <!-- 应用整体容器 -->
        <div class="nav"><Navict/></div>
        <!-- 顶部导航栏 -->
        <div class="person">
            <!-- 个人资料容器 -->
            <div class="person-l">
                <!-- 个人资料左侧内容 -->
                <div class="title">致各位同仁</div>
                <!-- 标题 -->
                <div class="txt">
                    <!-- 文本内容 -->
                    我们衷心感谢您对流浪宠物以及我们救助平台的支持和关爱。您的慷慨和善良，让更多的流浪宠物得到了温暖和帮助，让这个世界变得更加美好。
                    <br>
                    您的关注和捐赠，不仅为流浪宠物提供了食物、庇护和医疗，更是给了他们重新获得家庭的机会。您的善举，让他们重新拥有了希望，也让我们更有动力去继续为流浪宠物事业努力。
                    <br>
                    我们深知，每一个关注、每一个转发、每一个捐赠，都是您对流浪宠物的关爱和帮助。我们由衷地感谢您，感谢您为这个平台所做的一切。
                    <br>
                    我们期待与您一起，继续为流浪宠物事业努力，让更多的流浪宠物得到救助和关爱。愿您的善举，能够感动更多的人，让这个世界变得更加美好。
                    <br>
                    再次感谢您对流浪宠物救助事业的支持和关爱！
                    <p style="text-align: right;margin-right: 20px;">宠物之家</p>
                </div>
            </div>
            <div class="person-r">
                <!-- 个人资料右侧内容 -->
                <div class="head">
                    <!-- 头像容器 -->
                    <img class="head-img" src="../static/user/dog-bg.png" alt="">
                    <!-- 头像 -->
                </div>
                <div class="name-area">
                    <!-- 姓名区域 -->
                    <div class="name-i" @click="open">
                        {{ myStore.user.name }}
                        <!-- 姓名 -->
                        <span class="medal-b">
                            <img class="medal" src="../static/user/勋章.png" alt="">
                            <p class="me-txt">宠物之星</p>
                            <!-- 勋章图片和称号 -->
                        </span>
                    </div>
                    <div class="em">
                        <img class="em-img" src="../static/user/EMAIL.png" alt="">
                        <!-- 邮箱图标 -->
                        <div class="text"><span>{{ myStore.user.email }}</span>
                            <!-- 邮箱 -->
                        </div>
                    </div>
                    <div class="em">
                        <img class="em-img" src="../static//user/密码.png" alt="">
                        <!-- 密码图标 -->
                        <div class="text" style="margin-top: -10px;"><el-input placeholder="新密码" type="password" v-model="password" /></div>
                        <!-- 密码输入框 -->
                    </div>
                    <div class="em">
                        <img class="em-img" src="../static//user/pc-权限管理.png" alt="">
                        <!-- 确认密码图标 -->
                        <div class="text" style="margin-top: -10px;"><el-input placeholder="确认密码" type="password" v-model="password2" /></div>
                        <!-- 确认密码输入框 -->
                    </div>
                    <div class="btn">
                        <el-button class="btn-t" type="primary" @click="revise_p">
                            修改
                            <!-- 提交按钮 -->
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-b">
            <!-- 底部导航栏 -->
            <Navict_b />
        </div>
    </div>
</template>

<script setup>
import Navict from './Navict.vue'
import Navict_b from "./ButtomNavict.vue"
import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { useStore } from '@/stores/counter'

const myStore = useStore()
const router = useRouter()

let password2 = ref("1234")
let password = ref("1234")

const storedData = sessionStorage.getItem('token');
const t = JSON.parse(storedData)

// 定义触发操作的方法，在组件挂载后执行
const fetchData = async (url,name) => {
  try {
    // 发起请求
    const response = await axios.get(url,{
        username:name
    },{
        headers:{
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' 
        }
    })

    // 更新数据到 Pinia Store
    myStore.setUser(response.data.user_info_list[0])
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}



// 在组件挂载后执行 fetchData 方法
onMounted(() => {
  if(t===null){
    ElMessage({
        message:"请登录！",
        type:"error"
    })
    router.push("/login")
  }else{
    const username = encodeURIComponent(t.username);
    const url = `http://localhost:8000/pet/users?param=${username}`
    console.log(url,username)
    fetchData(url)
  }
})


const revise = async (url,user) => {
  try {
    // 发起请求
    const response = await axios.post(url,{
        username:t.username,
        password:user
    },{
        headers:{
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' 
        }
    })
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}


function revise_p(){
    if(password == "" || password2 == ""){
        ElMessage({
            type: 'error',
            message: '请输入密码',
            
        })
    }else{
        //判断两次密码是否一致(((
        let pas = password.value
        if(password.value === password2.value){
            revise("http://localhost:8000/pet/revise",pas).then(()=>{
                    ElMessage({
                    type:"success",
                    message:"修改密码成功"
                })
            })
        }else{
            ElMessage({
                type: 'error',
                message: '两次密码输入不一致',
            })
        }
    }

}



// 弹出警告对话框，确认是否退出登录
const open = () => {
  ElMessageBox.confirm(
    '你将要退出登录，你确定继续吗?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
      center: true,
    }
  )
    .then(() => {
      sessionStorage.removeItem('token');
      // 显示成功消息，注销成功
      ElMessage({
        type: 'success',
        message: '注销成功',
      })
      // 跳转到登录页面
      router.push('/login')
    })
    .catch(() => {
      // 显示信息消息，取消注销
      ElMessage({
        type: 'info',
        message: '取消注销',
      })
    })
}


 
</script>

<style scoped>
    .app{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }
    .name-area{
        width: 100%;
        color: #03a860;
        font-size: 30px;
        font-weight: bold;
        background-color: #edf3d1;
        margin-top: 180px;
        border-radius: 8px;
    }
    .medal-b{
        width: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-top: -70px;
        margin-left: 450px;
    }
    .medal{
        width: 40px;
        height:40px;
        margin-left: 10px;
    }
    .me-txt{
        font-size: 10px;
        height: 40px;
        margin-top: -30px;
        margin-left: -140px;
        color: #800080;
    }
    .btn{
        width: 50%;
        height: 50px;
        margin: 0 auto;
        margin-top: 10px;
    }
    .btn-t{
        width: 100%;
        height: 50px;
        background-color: #03a860;
        margin-top: 20px;
    }
    .name-i{
        width: 100%;
        height: 80px;
        color:#03a860;
        font-size: 30px;
        line-height: 80px;
        text-align: center;
        margin-top:40px;
    }
    .em{
        width: 80%;
        margin:0 auto;
        display: flex;
        justify-content: space-evenly;
        margin-top: 20px;
    }
    .text{
        width: 50%;
    }
    .em-img{
        width:40px;
        height: 40px;
    }

    .title{
        width: 100%;
        color: #03a860;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
    }
    .txt{
        width: 80%;
        color: black;
        font-size: 20px;
        line-height: 37px;
        margin: 0 auto;
        margin-top: 20px;

    }
    .head{
        width: 49%;
        position: absolute;
        background-color: rgba(36,157,847,0);
        display: flex;
        justify-content: space-evenly;
        margin-top: -40px;
    }
    .head-img{
        width: 400px;
        height: 300px;
        margin-bottom: 0px;
    }
    .nav{
        width: 100%;
        height: 200px;
        margin-bottom: 20px;
    }
    .person{
        width: 98%;
        margin:0 auto;
        display: flex;
        justify-content: start;
        margin-bottom: 20px;
    }
    .person-r{
        width:  50%;
        height: auto;
        display: flex;
    }
    .person-l{
        width:  50%;
        height: auto;
    }
</style>